<template>
	<view class="segmented-control" :class="styleType" :style="wrapStyle">
		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType + ' ' + (index === currentIndex ? 'segmented-control-item--on':'')" :key="index" :style="index === currentIndex ? activeStyle : itemStyle" @click="onClick(index)">
			<view class="text-item">
				{{item.Name ? item.Name : item }} <!-- {{item.Count!=undefined ? '(' + item.Count + ')' : ''}} -->
			</view>
			<view v-if="item.Count!=undefined && item.Count>0" class="dot">
				{{item.Count}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-segmented-control',
		props: {
			current: {
				type: Number,
				default: 0
			},
			values: {
				type: Array,
				default () {
					return [];
				}
			},
			activeColor: {
				type: String,
				default: '#007aff'
			},
			styleType: {
				type: String,
				default: 'button'
			}
		},
		data() {
			return {
				currentIndex: this.current
			}
		},
		watch: {
			current(val) {
				if (val !== this.currentIndex) {
					this.currentIndex = val;
				}
			}
		},
		computed: {
			wrapStyle() {
				let styleString = '';
				switch (this.styleType) {
					case 'text':
					case 'text-line':
						styleString = `border:0;`;
						break;
					default:
						styleString = `border-color: ${this.activeColor}`;
						break;
				}
				return styleString;
			},
			itemStyle() {
				let styleString = '';
				switch (this.styleType) {
					case 'text':
					case 'text-line':
						styleString = `color:#999999;border-left:0;`;
						break;
					default:
						styleString = `color:${this.activeColor};border-color:${this.activeColor};`;
						break;
				}
				return styleString;
			},
			activeStyle() {
				let styleString = '';
				switch (this.styleType) {
					case 'text':
					case 'text-line':
					    //styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;font-weight: bold;border-bottom-width: 3px;`;
						//styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;font-weight: bold;border-bottom-width: 3px;`;
						break;
					default:
						styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
						break;
				}
				return styleString;
			}
		},
		methods: {
			onClick(index) {
				if (this.currentIndex !== index) {
					this.currentIndex = index;
					this.$emit('clickItem', index);
				}
			}
		},
	}
</script>

<style lang="scss">
	.dot{
		position: absolute;
		top:8upx;
		right:8upx;
		background-color:#E65653;
		height:18px;
		width:18px;
		line-height:18px;
		text-align: center;
		border-radius:50%;
		color: #FFFFFF;
		font-size:12px;
	}
	.segmented-control {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		background-color: #FFFFFF;
		font-size: 28upx;
		border-radius: 10upx;
		box-sizing: border-box;
		margin: 0 auto;
		overflow: hidden;
		box-shadow: #cccccc 0px 1px 6px 0px;
	}
    .segmented-control:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		color: #d9d9d9;
		border-bottom: 1px solid #cccccc;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
	}
	.segmented-control.text-line:after {
		height: 0px;
		border: 0px;
	}
	.segmented-control.button {
		border: 2upx solid;
	}
	.segmented-control.text-line,.segmented-control.text {
		border: 0;
		border-radius: 0upx;
	}

	.segmented-control-item {
		
		color: #999999;
		flex: 1;
		text-align: center;
		line-height: 46px;
		height:46px;
		box-sizing: border-box;
		position: relative;
	}

	.segmented-control-item.button {
		border-left: 1upx solid;
	}

    .text-item{
		padding-top:4upx;
	}
		
    .segmented-control-item.text,.segmented-control-item.text-line {
		border-left: 0;
		.text-item{
			margin:15px 0px;
			line-height:1;
		}
	}
	
	.segmented-control-item.text-line{
		.text-item{ border-right:1px solid #666666;}
	}
    .segmented-control-item.text-line:last-child .text-item{
		border-right-width:0px;
	}

	.segmented-control-item:first-child {
		border-left-width: 0;
	}
	
	.segmented-control-item--on{
		color: #333333;
	}
	.segmented-control-item--on .text-item{
		padding-top:0px;
		font-size: 32upx;
		font-weight: bold;
	}
	.segmented-control-item--on:after {
		content: " ";
		position: absolute;
		top: auto;
		left: 15%;
		right: 15%;
		bottom: 0;
		width: 70%;
		height: 3px;
		border-radius:3px;
		background-color: #E65653;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		border-right: 0;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	

	.segmented-control-item.text-line.segmented-control-item--on:after {
		height: 0px;
	}
</style>